<template>
	<div>
		<n-card>
			<div class="sales-rank">
				<div class="sales-rank__header">
					<span>查看老师班级扣课情况</span>
				</div>

				<div class="sales-rank__container">
					<div class="sales-rank__filter">
						<ul>
							<li
								v-for="(item, index) in types"
								:key="index"
								:class="{
									active: item.value == type
								}"
								@click="changeDate(item.value)"
							>
								{{ item.label }}
							</li>
						</ul>
						<el-select
							size="mini"
							clearable
							v-model="dateSummary"
							@change="searchSubmit"
							style="width: 150px; margin-right: 10px"
						>
							<el-option :key="all" value="" label="全部"></el-option>
							<el-option
								v-for="item in class_date_list"
								:key="item.value"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
						<el-select
							size="mini"
							clearable
							v-model="class_type_selected"
							@change="searchSubmit"
							style="width: 150px; margin-right: 10px"
						>
							<el-option :key="all" value="" label="全部"></el-option>
							<el-option
								v-for="item in class_type_list"
								:key="item.value"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
						<el-date-picker
							v-model="date"
							class="hidden-xs-only"
							type="daterange"
							size="mini"
							@change="handleElDatePicker"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
						<el-button
							size="mini"
							type="success"
							style="margin-left: 10px"
							@click="handleQuery"
							>查询</el-button
						>
					</div>

					<br />
					<div style="width: 100%;margin-bottom: 30px;">
						<font color="red" style="float: right;"><b>计算公式：</b>	实际上课学生数 = 应该上课学生总数 - 请假学生 + 插班	</font>
					</div>
					<n-table :bordered="true" :single-line="false" style="height: 300px" >
						<thead align="center">
							<tr>
								<th>老师姓名</th>
								<th>{{ dateSummary + "分班数量" }}</th>
								<th>实际上课班级数量</th>
								<th>应该上课学生总数</th>
								<th>请假学生</th>
								<th>插班</th>
								<th>实际上课学生数</th>

							</tr>
						</thead>

						<tbody align="center">
							<!-- <n-scrollbar style="max-height: 400px"> -->

							<tr v-for="item in classDeductionList" :key="item" style="width: 100%">
								<td>{{ item.name }}</td>
								<td>{{ item.num }}</td>
								<td>{{ item.classenNum }}</td>
								<td>{{ item.class_students }}</td>
								<td>{{ item.leaveStudents }}</td>
								<td>{{ item.placementStudents }}</td>
								<td>{{ item.classed_students }}</td>

							</tr>
							<!-- </n-scrollbar> -->
						</tbody>
					</n-table>
				</div>
			</div>
		</n-card>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
import { GameControllerOutline, GameController } from "@vicons/ionicons5";
import teacherClass from "../components/teacherClass.vue";
import { useRefs } from "/@/core";
import { NGrid, NGridItem, NCard, NStatistic, NRow, NCol, NIcon } from "naive-ui";
import { NTable, NScrollbar } from "naive-ui";
import { ElMessage } from "element-plus";
// import { GameControllerOutline, GameController } from '@vicons/ionicons5'
export default defineComponent({
	components: {
		NGrid,
		NGridItem,
		NCard,
		NStatistic,
		NRow,
		NCol,
		NIcon,
		GameControllerOutline,
		GameController,
		teacherClass,
		NTable,
		NScrollbar
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		onMounted(async () => {
			getStudentInfo();
		});
		const studyStudents = reactive({
			studying: "",
			leaveStudying: "",
			stopStudying: ""
		});
		const getStudentInfo = async () => {
			const res = await service.studentService.studentReport();
			if (res) {
				studyStudents.studying = res.studying;
				studyStudents.stopStudying = res.stopStudying;
				studyStudents.leaveStudying = res.leaveStudying;
			}
		};
		const date = ref([]);

		function formatZero(num, len) {
			if (String(num).length > len) return num;
			return (Array(len).join("0") + num).slice(-len);
		}

		// 获取当前年份
		const getNowYear = function () {
			let date = new Date();
			date.getFullYear(); //获取完整的年份(4位)
			let season = "";
			if (date.getMonth() + 1 >=2  && date.getMonth() + 1 <= 7) {
				season = "春季";
			}else if ((date.getMonth() + 1 >=9  && date.getMonth() + 1 <= 12) || date.getMonth() + 1 === 1) {
				season = "秋季";
			}
			return date.getFullYear() + "年" + season;
		};


		function getLastWeek1(num) {
			var time = new Date().getTime() - num * 24 * 60 * 60 * 1000;
			var tragetTime = new Date(time);
			let tragetTime1 =
				tragetTime.getFullYear() +
				"-" +
				(tragetTime.getMonth()+ 1 > 9
					? tragetTime.getMonth() + 1
					: "0" + (tragetTime.getMonth() + 1)) +
				"-" +
				(tragetTime.getDate() > 9 ? tragetTime.getDate() : "0" + tragetTime.getDate());
			return tragetTime1;
		}
		function thisweek() {
			let start_time
			let end_time
			let now = new Date();
			let date = now.getDate();
			let week = now.getDay();
			// alert(getLastWeek1(4))
			// alert(getLastWeek1(-2))
			switch (week) {
				case 0:
					start_time = getLastWeek1(6)
					end_time = getLastWeek1(0)
					break;
				case 1:
					start_time = getLastWeek1(0)
					end_time = getLastWeek1(-6)
					// if (month+1 === 1 && date <7){
					// 	year -= 1
					// 	month = 12
					// }
					break;
				case 2:
					start_time = getLastWeek1(1)
					end_time = getLastWeek1(-5)
					break;
				case 3:
					start_time = getLastWeek1(2)
					end_time = getLastWeek1(-4)
					break;
				case 4:
					start_time = getLastWeek1(3)
					end_time = getLastWeek1(-3)
					break;
				case 5:
					start_time = getLastWeek1(4)
					end_time = getLastWeek1(-2)
					break;
				case 6:
					start_time = getLastWeek1(5)
					end_time = getLastWeek1(-1)
					break;
			}
			return [start_time,end_time]
		}

		function lastweek() {
			let start_time
			let end_time
			let now = new Date();
			let date = now.getDate();
			let week = now.getDay();
			switch (week) {
				case 0:
					start_time = getLastWeek1(11)
					end_time = getLastWeek1(7)
					break;
				case 1:
					start_time = getLastWeek1(5)
					end_time = getLastWeek1(1)
					// if (month+1 === 1 && date <7){
					// 	year -= 1
					// 	month = 12
					// }
					break;
				case 2:
					start_time = getLastWeek1(6)
					end_time = getLastWeek1(2)
					break;
				case 3:
					start_time = getLastWeek1(7)
					end_time = getLastWeek1(3)
					break;
				case 4:
					start_time = getLastWeek1(8)
					end_time = getLastWeek1(4)
					break;
				case 5:
					start_time = getLastWeek1(9)
					end_time = getLastWeek1(5)
					break;
				case 6:
					start_time = getLastWeek1(10)
					end_time = getLastWeek1(6)
					break;
			}
			return [start_time,end_time]
		}

		function getLastWeek() {
			let now = new Date();
			let date = now.getDate();
			let week = now.getDay();
			let month = now.getMonth();
			let year = now.getFullYear();
			console.log(typeof month, month);

			switch (week) {
				case 0:
					date = date - 13;
					break;
				case 1:
					date = date - 7;
					// if (month+1 === 1 && date <7){
					// 	year -= 1
					// 	month = 12
					// }
					break;
				case 2:
					date = date - 8;
					break;
				case 3:
					date = date - 9;
					break;
				case 4:
					date = date - 10;
					break;
				case 5:
					date = date - 11;
					break;
				case 6:
					date = date - 12;
					break;
			}
			let start_time =
				year + "-" + formatZero(now.getMonth() + 1, 2) + "-" + formatZero(date, 2);
			let end_time =
				year + "-" + formatZero(now.getMonth() + 1, 2) + "-" + formatZero(date + 6, 2);

			return [start_time, end_time];
		}
		const type = ref<string>("day");
		const classDeductionList = ref([]);
		const handleQuery = () => {
			getClassDeductionList();
		};
		const searchSubmit = function () {
			getClassDeductionList();
		};
		const handleElDatePicker = () => {
			getClassDeductionList();
		};
		const getClassDeductionList = async () => {
			// 请求数据
			if (date.value === null) {
				return ElMessage("日期范围不能为空！");
			}
			const res = await service.classgroupService.classDeduction({
				class_date: dateSummary.value,
				time: date.value,
				class_type: class_type_selected.value
			});
			classDeductionList.value = res;
		};
		const changeDate = async (value: string) => {
			// alert(value)
			// let submitTime = [];
			if (value === "thisweek") {
				date.value = thisweek();
				console.log(date.value);
				// alert(getTime(2));
			}
			else if (value === "lassweek") {
				date.value = lastweek();
				console.log(date.value);
				// alert(getTime(2));
			} else if (value === "lassmonth") {
				let nowdays = new Date();
				let year = nowdays.getFullYear();
				let month = nowdays.getMonth();
				if (month == 0) {
					month = 12;
					year = year - 1;
				}
				if (month < 10) {
					month = "0" + month;
				}

				let myDate = new Date(year, month, 0);

				let startDate = year + "-" + month + "-01"; //上个月第一天
				let endDate = year + "-" + month + "-" + myDate.getDate(); //上个月最后一天
				date.value = [startDate, endDate];
			} else if (value === "month") {
				let nowdays = new Date();
				let year = nowdays.getFullYear();
				let month = nowdays.getMonth();
				if (month == 0) {
					month = 12;
					year = year - 1;
				}
				if (month < 10) {
					month = "0" + month;
				}

				let myDate = new Date();

				let startDate = year + "-" + formatZero(parseInt(month) + 1, 2) + "-01"; //上个月第一天
				let endDate =
					year + "-" + formatZero(parseInt(month) + 1, 2) + "-" + formatZero(myDate.getDate(), 2); //本月的今天
				date.value = [startDate, endDate];
				console.log(date.value);
			} else if (value === "year") {
				let now = new Date();

				let start = "" + now.getFullYear() + "-" + "01-01";
				let end = new Date(now.getFullYear() + 1, 0, 0)
				// alert(end.getFullYear())
				date.value = [start, end.getFullYear()+"-"+formatZero(end.getMonth() + 1,2)+"-"+formatZero(end.getDate(),2)];
			}

			getClassDeductionList();
			type.value = value;
		};
		const dateSummary = ref(getNowYear());
		// 定义班级日期
		const class_date_list = ref([]);
		// 获取班级日期
		const getClassDate = async function () {
			const res = await service.base.system.param.list({ keyName: "class_date" });
			// 将json字符串转换为json对象
			let classDate = eval("(" + res[0].data + ")");
			classDate.forEach((item) => {
				class_date_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "info"
				});
			});
		};
		const class_type_selected = ref("1");
		// 定义班级类型
		const class_type_list = ref([]);
		// 获取班级日期
		const getClassType = async function () {
			const res = await service.base.system.param.list({ keyName: "class_type" });
			// 将json字符串转换为json对象
			let classDate = eval("(" + res[0].data + ")");
			classDate.forEach((item) => {
				class_type_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "info"
				});
			});
		};

		onMounted(() => {
			getClassDate();
			getClassType();
			changeDate("lassweek");
			getLastWeek1(4)
		});
		const types = ref<Array<any>>([
			{
				label: "本周",
				value: "thisweek"
			},
			{
				label: "上周",
				value: "lassweek"
			},
			{
				label: "上月",
				value: "lassmonth"
			},
			{
				label: "本月",
				value: "month"
			},
			{
				label: "全年",
				value: "year"
			}
		]);
		return {
			studyStudents,
			types,
			type,
			class_date_list,
			dateSummary,
			date,
			changeDate,
			classDeductionList,
			handleQuery,
			getNowYear,
			handleElDatePicker,
			searchSubmit,
			class_type_list,
			class_type_selected
		};
	}
});
</script>


<style lang="scss" scoped>
.light-green {
	height: 108px;
	background-color: rgba(0, 128, 0, 0.12);
}
.green {
	height: 108px;
	background-color: rgba(0, 128, 0, 0.24);
}
.sales-rank {
	&__header {
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 15px;
		font-weight: bold;
		padding: 0 20px;
	}

	&__container {
		padding: 0 20px;
	}

	&__filter {
		display: flex;
		align-items: center;
		height: 40px;

		ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200px;
			margin-right: 20px;

			li {
				list-style: none;
				font-size: 14px;
				cursor: pointer;
				color: #d8d8d8;
				white-space: nowrap;
				margin-right: 10px;

				&.active {
					color: #000;
				}

				&:not(.active):hover {
					color: #999;
				}
			}
		}

		.el-date-editor {
			margin-left: 40px;
		}
	}

	&__list {
		height: 260px;

		li {
			display: flex;
			align-items: center;
			height: 52px;
			list-style: none;
			font-size: 13px;
			cursor: pointer;

			span {
				&:first-child {
					display: inline-block;
					height: 14px;
					width: 14px;
					border-radius: 14px;
					text-align: center;
					line-height: 14px;
					font-size: 12px;
				}

				&:nth-child(2) {
					flex: 1;
					margin: 0 10px;
					letter-spacing: 0.5px;
					color: #222;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}

			&:nth-last-child(n + 3) {
				span {
					&:first-child {
						background-color: #000;
						color: #fff;
					}
				}
			}

			&:hover {
				span:nth-child(2) {
					text-decoration: underline;
				}
			}
		}
	}
}
</style>